<template>
  <div class="menuList">
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="text-align: left;">
        <i class="el-icon-s-claim"></i>
        <b>分类</b>
        <div style="width:385px;float:right">
          <span style="font-size:12px;color:red;">提示：单击标签为修改类别,回车为添加类别</span>
          <div style="display:inline-block">
            <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="addCat"
            @blur="addCat"
          ></el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput"
            style="float: left;"
          >+ 添加类别</el-button>
          </div>
        </div>
        
      </div>
      <div
        :key="tag.index"
        v-for="tag in dynamicTags"
        @click="editCatshow(tag.category_id)"
        style="width: 30%;background: green;line-height: 30px;border-radius: 6px;color: #fff;display: inline-block;float: left;margin: 10px;"
      >{{tag.category_name}}</div>
    </el-card>
    <el-dialog
      title="修改类别"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
      :closeOnClickModal="false"
    >
      <el-input v-model="editCateg.category_name"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editCat">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import addNews from "@/share/alter/addNews";
export default {
  components: {
    addNews
  },
  data() {
    return {
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      user: {},
      centerDialogVisible: false,
      editCateg: ""
    };
  },
  mounted() {
    this.user = JSON.parse(this.$cookie.get("userAdmin"));
    this.getCategorylist();
  },
  methods: {
    //类别列表
    getCategorylist() {
      var that = this;
      that.$axios
        .get("apis/admin/categorylist")
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              console.log(res.data.data);
              that.dynamicTags = res.data.data;
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //删除类别
    delCat(tag) {
      var that = this;
      that.$axios
        .post(
          "apis/admin/delcategory",
          this.$qs.stringify({
            category_id: tag
          })
        )
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              console.log(res.data.data);
              that.getCategorylist();
              that.$message({
                message: "类别删除成功~",
                type: "success"
              });
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    //添加类别
    addCat() {
      var that = this;
      let inputValue = that.inputValue;
      if (inputValue) {
        that.$axios
          .post(
            "apis/admin/addcategory",
            this.$qs.stringify({
              admin_id: that.user.admin_id,
              category_name: inputValue
            })
          )
          .then(function(res) {
            if (res.status == 200) {
              if (res.data.status == 1) {
                console.log(res.data.data);
                that.getCategorylist();
                that.$message({
                  message: "添加类别成功~",
                  type: "success"
                });
              }
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    //展示修改框
    editCatshow(id) {
      var that = this;
      that.centerDialogVisible = true;
      for (var i = 0; i < that.dynamicTags.length; i++) {
        if (that.dynamicTags[i].category_id == id) {
          var editVal = that.dynamicTags[i];
        }
      }
      that.editCateg = editVal;
    },
    //修改类别
    editCat() {
      var that = this;
      that.$axios
        .post(
          "apis/admin/editcategory",
          this.$qs.stringify({
            admin_id: that.user.admin_id,
            category_id: that.editCateg.category_id,
            category_name: that.editCateg.category_name
          })
        )
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              that.centerDialogVisible = false;
              that.$message({
                message: "修改成功~~~",
                type: "success"
              });
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style lang="less" scoped>
.menuList {
  height: 830px;
  .el-card {
    width: 100% !important;
  }
  .text {
    font-size: 14px;
  }
  .el-collapse-item__header {
    border-bottom: none !important;
  }
  .item {
    margin-bottom: 18px;
  }
  .evaluate {
    width: 100%;
    height: 100px;
  }
  .evaluate p {
    line-height: 20px;
  }
  .headImgS img {
    border-radius: 50px;
    border: 1px solid rgb(252, 122, 122);
    width: 30px;
    height: 30px;
  }
  .headImgS b {
    position: absolute;
    margin-top: 5px;
    padding-left: 14px;
  }
  .el-tag {
    margin-top: 10px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 480px;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
}
</style>
